<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户页面</title>
</head>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    #box{
        width: 100%;
        height: 600px;
        position: relative;
    }
    #top{
        width: 100%;
        height: 100px;
       background-image: url("/image/top.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100px;
    }
    #top1{
        height: 100px;
        width: 200px;
        padding: 25px;
    }
    #top2{
        height: 100px;
        width: 250px;
       position: absolute;
        left: 1200px;
        top: 60px;
        font-size: 20px;
    }
    #option{
        width: 200px;
        height: 500px;

    }
    .option1,.option2,.option3,.option4,.option5{
        width: 200px;
        height: 50px;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
    }
    .click{
        background-image: url("/image/click.jpg");
        background-repeat: no-repeat;
        background-size: 200px 50px;
    }
    .content{
        width: 80%;
        
        height: 500px;
        position: absolute;
        left: 200px;
        top: 100px;
    }
    .content1{
        width: 80%;
        height: 500px;
        position: absolute;
        left: 300px;
        top: 0px;
    }
    .table{
        width: 600px;
    }
    .btn{
        width: 50px;
        height: 35px;
        cursor: pointer;
    }
    button{
        cursor: pointer;
    }
</style>
<body>
<div id="box">
    <div id="top">
       <div id="top1">
           <h1>图书管理系统</h1>
       </div>
        <div id="top2">
            欢迎您:<span class="user"></span>
           角色:<span class="role">学生</span>
        </div>
    </div>
    <div id="option">
        <div class="option1">首页</div>
        <div class="option2">借阅图书</div>
        <div class="option3">归还图书</div>
        <div class="option4">修改密码</div>
        <div class="option5">退出系统</div>
        <div class="content">

        </div>
    </div>
</div>
</body>
<script>

    var user ;
    $(function (){
        $.ajax({
            url :"userIdentityServlet",
            type :"post",
            success : function (s){
                user = s;
                $(".user").append(s);
            }
        })
        //首页
        function load() {
            $(".option1").attr("class", "option1 click");
            $(".option2").attr("class", "option2");
            $(".option3").attr("class", "option3");
            $(".option4").attr("class", "option4");
            $(".option5").attr("class", "option5");
            $.ajax({
                url: "userHomeServlet",
                type: "post",
                success: function (s) {
                    $(".content").html("<h1 style='text-align: center'>" + s + "</h1>");
                }
            })
        }

        $(".option1").click(function () {
            load()
        });
        $(".option1").ready(function () {
            load()
        });
    })


    var currentPage = 0;
    var totalPage = 0;
    var search1 ;
    var search2 ;
    function Ajax(s){
            let s1 = s.list;
            currentPage = s.currentPage;
            totalPage = s.totalPage;
            let  str = "<div class='content1'>" +
                "书名:<input type=\"text\" class=\"bookname\" style='height: 25px'>\n" +
                "作者:<input type=\"text\" class=\"auther\"  style='height: 25px'>\n" +
                " <button class='btn'>查询</button> " +
                "<table border='1px' class='table'>\n" +
                "    <tr>\n" +
                "        <td>id</td>\n" +
                "        <td>书名</td>\n" +
                "        <td>作者</td>\n" +
                "        <td>价格</td>\n" +
                "        <td>数量</td>\n" +
                "        <td>操作</td>\n" +
                "    </tr>" +
                "</div>"
            $(".content").html(str);
            for (let i = 0; i < s1.length; i++) {
                let str1 =  "    <tr>\n" +
                    "        <td>"+s1[i].id+"</td>\n" +
                    "        <td>"+s1[i].bookname+"</td>\n" +
                    "        <td>"+s1[i].auther+"</td>\n" +
                    "        <td>"+s1[i].price+"</td>\n" +
                    "        <td>"+s1[i].nums+"</td>\n" +
                    "        <td><a href='javascript:void(0)' name='"+s1[i].id+"' class=\"borrow\">借阅</a></td>\n" +
                    "  </tr>"
                $(".table").append(str1);
            }
            let str2 = "<button class=\"btn1\">首页</button>     <button class=\"btn2\">上一页</button>" +
                "<button class=\"btn3\">下一页</button>     <button class=\"btn4\">末页</button>" +
                "<span style='font-size: 25px'>共"+s.totalCount+"条记录,共"+s.totalPage+"页</span>"
            $(".table").after(str2);
        //借阅
        for (let i = 0; i < 4; i++) {
            $(".borrow").eq(i).click(function (){
                var id = $(".borrow").eq(i).attr("name");
                $.ajax({
                    url : "userBorrowServlet",
                    data : "id="+id,
                    success : function (s){
                        if (s){
                            alert("借阅成功!");
                            location.reload(true);
                        }else {
                            alert("借阅失败!");
                        }
                    }
                })
            });
        }
        //首页
        $(".btn1").click(function (){
            $.ajax({
                url: "userFindByPageServlet",
                type : "post",
                data : "currentPage=1",
                success : function (s){
                    Ajax(s)
                }
            })
        });
        //上一页
        $(".btn2").click(function (){
            $.ajax({
                url: "userFindByPageServlet",
                type : "post",
                data : "currentPage="+(parseInt(currentPage)-1),
                success : function (s){
                    Ajax(s)
                }
            })
        });

        //末页
        $(".btn4").click(function (){
            $.ajax({
                url: "userFindByPageServlet",
                type : "post",
                data : "currentPage="+totalPage,
                success : function (s){
                    Ajax(s)
                }
            })
        });
        //下一页
        $(".btn3").click(function (){
            $.ajax({
                url: "userFindByPageServlet",
                type : "post",
                data : "currentPage="+(parseInt(currentPage)+1)+"&totalPage="+totalPage,
                success : function (s){
                    Ajax(s)
                }
            })
        });
        //搜素
        $(".btn").click(function () {
            search1 = $(".bookname").val();
            search2 = $(".auther").val();
            $.ajax({
                url: "userSearchByPageServlet",
                type: "post",
                data: "bookname=" + search1 + "&auther=" + search2,
                success: function (s) {
                    Search(s)
                }
            })
        })
        //搜素
        function Search(s){
            let s1 = s.list;
            currentPage = s.currentPage;
            totalPage = s.totalPage;
            let  str = "<div class='content1'>" +
                "书名:<input type=\"text\" class=\"bookname\"   style='height: 25px'>\n" +
                "作者:<input type=\"text\" class=\"auther\"  style='height: 25px'>\n" +
                " <button class='btn'>查询</button> " +
                "<table border='1px' class='table'>\n" +
                "    <tr>\n" +
                "        <td>id</td>\n" +
                "        <td>书名</td>\n" +
                "        <td>作者</td>\n" +
                "        <td>价格</td>\n" +
                "        <td>数量</td>\n" +
                "        <td>操作</td>\n" +
                "    </tr>" +
                "</div>"
            $(".content").html(str);
            for (let i = 0; i < s1.length; i++) {
                let str1 =  "    <tr>\n" +
                    "        <td>"+s1[i].id+"</td>\n" +
                    "        <td>"+s1[i].bookname+"</td>\n" +
                    "        <td>"+s1[i].auther+"</td>\n" +
                    "        <td>"+s1[i].price+"</td>\n" +
                    "        <td>"+s1[i].nums+"</td>\n" +
                    "        <td><a href='javascript:void(0)' name='"+s1[i].id+"' class=\"borrow\">借阅</a></td>\n" +
                    "  </tr>"
                $(".table").append(str1);
            }
            let str2 = "<button class=\"btn1\">首页</button>     <button class=\"btn2\">上一页</button>" +
                "<button class=\"btn3\">下一页</button>     <button class=\"btn4\">末页</button>" +
                "<span style='font-size: 25px'>共"+s.totalCount+"条记录,共"+s.totalPage+"页</span>"
            $(".table").after(str2);
            //借阅
            for (let i = 0; i < 4; i++) {
                $(".borrow").eq(i).click(function () {
                    var id = $(".borrow").eq(i).attr("name");
                    $.ajax({
                        url: "userBorrowServlet",
                        data: "id=" + id,
                        success: function (s) {
                            if (s) {
                                alert("借阅成功!");
                            } else {
                                alert("借阅失败!");
                            }
                        }
                    })
                });
            }
                //首页
                $(".btn1").click(function (){
                    $.ajax({
                        url: "userSearchByPageServlet",
                        type : "post",
                        data : "currentPage=1&bookname="+search1+"&auther="+search2,
                        success : function (s){
                            Search(s)
                        }
                    })
                });
                //上一页
                $(".btn2").click(function (){
                    $.ajax({
                        url: "userSearchByPageServlet",
                        type : "post",
                        data : "currentPage="+(parseInt(currentPage)-1)+"&bookname="+search1+"&auther="+search2,
                        success : function (s){
                            Search(s)
                        }
                    })
                });

                //末页
                $(".btn4").click(function (){
                    $.ajax({
                        url: "userSearchByPageServlet",
                        type : "post",
                        data : "currentPage="+totalPage+"&bookname="+search1+"&auther="+search2,
                        success : function (s){
                            Search(s)
                        }
                    })
                });
                //下一页
                $(".btn3").click(function (){
                    $.ajax({
                        url: "userSearchByPageServlet",
                        type : "post",
                        data : "currentPage="+(parseInt(currentPage)+1)+"&totalPage="+totalPage+"&bookname="+search1+"&auther="+search2,
                        success : function (s){
                            Search(s)
                        }
                    })
                });
                //搜素
                $(".btn").click(function (){
                    search1 = $(".bookname").val();
                    search2 = $(".auther").val();
                    $.ajax({
                        url: "userSearchByPageServlet",
                        type : "post",
                        data : "bookname="+search1+"&auther="+search2,
                        success : function (s){
                            Search(s)
                        }
                    })
                });
            }
        }

    //借阅图书
    $(".option2").click(function (){
        $(".option1").attr("class","option1");
        $(".option2").attr("class","option2 click");
        $(".option3").attr("class","option3");
        $(".option4").attr("class","option4");
        $(".option5").attr("class","option5");
        $.ajax({
            url: "userFindByPageServlet",
            type : "post",
            success : function (s){
                Ajax(s)
            }
        })
    });

    //修改密码
    $(".option4").click(function (){
        $(".option1").attr("class","option1");
        $(".option2").attr("class","option2 ");
        $(".option3").attr("class","option3");
        $(".option4").attr("class","option4 click");
        $(".option5").attr("class","option5");
         let s =
             "<div class='content1'>" +
             "<table style='width: 400px' >" +
             "<tr>" +
             "<td>原密码:</td>" +
             "<td><input type='password' class='pwd1'></td>" +
             "<td class='td1'></td>" +
             "</tr>" +
             "<tr>" +
             "<td>新密码:</td>" +
             "<td><input type='password' class='pwd2'></td>" +
             "<td class='td2'></td>" +
             "</tr>" +
             "<tr>" +
             "<td>确认密码:</td>" +
             "<td><input type='password' class='pwd3'></td>" +
             "<td class='td2'></td>" +
             "</tr>" +
             "<tr>" +
             "<td></td>" +
             "<td><button class='submit'>提交</button></td>" +
             "<td></td>" +
             "</tr>" +
             "</table>" +
             "</div>"
        $(".content").html(s);

        $(".submit").click(function (){
            let pwd1 = $(".pwd1").val();
            let pwd2 = $(".pwd2").val();
            let pwd3 = $(".pwd3").val();
            if (pwd2 === pwd3){
                $(".td2").html("")
                $.ajax({
                    url : "userUpdateServlet",
                    type :"post",
                    data :"username="+user+"&password1="+pwd1+"&password2="+pwd2,
                    success :function (s){
                        if (s){
                            alert("密码修改成功!")
                            $(".td1").html("")
                            location.reload(true);
                        }else {
                            $(".td1").html("<span style='color: red'>原密码不正确!</span>")
                        }
                    }
                })
            }else {
                $(".td2").html("<span style='color: red'>俩次密码不一致!</span>")
            }
        });
    });


    function Give(s){
        let s1 = s.list;
        currentPage = s.currentPage;
        totalPage = s.totalPage;
        let  str = "<div class='content1'>" +
            "书名:<input type=\"text\" class=\"bookname\"   style='height: 25px'>\n" +
            "作者:<input type=\"text\" class=\"auther\"  style='height: 25px'>\n" +
            " <button class='btn'>查询</button> " +
            "<table border='1px' class='table'>\n" +
            "    <tr>\n" +
            "        <td>id</td>\n" +
            "        <td>书名</td>\n" +
            "        <td>作者</td>\n" +
            "        <td>价格</td>\n" +
            "        <td>操作</td>\n" +
            "    </tr>" +
            "</div>"
        $(".content").html(str);
        for (let i = 0; i < s1.length; i++) {
            let str1 =  "    <tr>\n" +
                "        <td>"+s1[i].id+"</td>\n" +
                "        <td>"+s1[i].bookname+"</td>\n" +
                "        <td>"+s1[i].auther+"</td>\n" +
                "        <td>"+s1[i].price+"</td>\n" +
                "        <td><a href='javascript:void(0)' name='"+s1[i].id+"' class=\"give\">归还</a></td>\n" +
                "  </tr>"
            $(".table").append(str1);
        }
        let str2 = "<button class=\"btn1\">首页</button>     <button class=\"btn2\">上一页</button>" +
            "<button class=\"btn3\">下一页</button>     <button class=\"btn4\">末页</button>" +
            "<span style='font-size: 25px'>共"+s.totalCount+"条记录,共"+s.totalPage+"页</span>"
        $(".table").after(str2);
        //归还
        for (let i = 0; i < 4; i++) {
            $(".give").eq(i).click(function (){
                var id = $(".give").eq(i).attr("name");
                $.ajax({
                    url : "userGiveServlet",
                    data : "id="+id,
                    success : function (){
                       alert("归还成功!")
                        location.reload(true);
                    }
                })
            });
        }
        //首页
        $(".btn1").click(function (){
            $.ajax({
                url: "userGiveByPageServlet",
                type : "post",
                data : "currentPage=1",
                success : function (s){
                    Give(s)
                }
            })
        });
        //上一页
        $(".btn2").click(function (){
            $.ajax({
                url: "userGiveByPageServlet",
                type : "post",
                data : "currentPage="+(parseInt(currentPage)-1),
                success : function (s){
                    Give(s)
                }
            })
        });

        //末页
        $(".btn4").click(function (){
            $.ajax({
                url: "userGiveByPageServlet",
                type : "post",
                data : "currentPage="+totalPage,
                success : function (s){
                    Give(s)
                }
            })
        });
        //下一页
        $(".btn3").click(function (){
            $.ajax({
                url: "userGiveByPageServlet",
                type : "post",
                data : "currentPage="+(parseInt(currentPage)+1)+"&totalPage="+totalPage,
                success : function (s){
                    Give(s)
                }
            })
        });
        //搜素
        $(".btn").click(function (){
            search1 = $(".bookname").val();
            search2 = $(".auther").val();
            $.ajax({
                url: "userSearchGiveByPageServlet",
                type : "post",
                data : "bookname="+search1+"&auther="+search2,
                success : function (s){
                    SearchGive(s)
                }
            })
        });
        function SearchGive(s){
            let s1 = s.list;
            currentPage = s.currentPage;
            totalPage = s.totalPage;
            let  str = "<div class='content1'>" +
                "书名:<input type=\"text\" class=\"bookname\"   style='height: 25px'>\n" +
                "作者:<input type=\"text\" class=\"auther\"  style='height: 25px'>\n" +
                " <button class='btn'>查询</button> " +
                "<table border='1px' class='table'>\n" +
                "    <tr>\n" +
                "        <td>id</td>\n" +
                "        <td>书名</td>\n" +
                "        <td>作者</td>\n" +
                "        <td>价格</td>\n" +
                "        <td>操作</td>\n" +
                "    </tr>" +
                "</div>"
            $(".content").html(str);
            for (let i = 0; i < s1.length; i++) {
                let str1 =  "    <tr>\n" +
                    "        <td>"+s1[i].id+"</td>\n" +
                    "        <td>"+s1[i].bookname+"</td>\n" +
                    "        <td>"+s1[i].auther+"</td>\n" +
                    "        <td>"+s1[i].price+"</td>\n" +
                    "        <td><a href='javascript:void(0)' name='"+s1[i].id+"' class=\"give\">归还</a></td>\n" +
                    "  </tr>"
                $(".table").append(str1);
            }
            let str2 = "<button class=\"btn1\">首页</button>     <button class=\"btn2\">上一页</button>" +
                "<button class=\"btn3\">下一页</button>     <button class=\"btn4\">末页</button>" +
                "<span style='font-size: 25px'>共"+s.totalCount+"条记录,共"+s.totalPage+"页</span>"
            $(".table").after(str2);
            //归还
            for (let i = 0; i < 4; i++) {
                $(".give").eq(i).click(function (){
                    var id = $(".give").eq(i).attr("name");
                    $.ajax({
                        url : "userGiveServlet",
                        data : "id="+id,
                        success : function (){
                            alert("归还成功!")
                            location.reload(true);
                        }
                    })
                });
            }
            //首页
            $(".btn1").click(function (){
                $.ajax({
                    url: "userSearchGiveByPageServlet",
                    type : "post",
                    data : "currentPage=1&bookname="+search1+"&auther="+search2,
                    success : function (s){
                        SearchGive(s)
                    }
                })
            });
            //上一页
            $(".btn2").click(function (){
                $.ajax({
                    url: "userSearchGiveByPageServlet",
                    type : "post",
                    data : "currentPage="+(parseInt(currentPage)-1)+"&bookname="+search1+"&auther="+search2,
                    success : function (s){
                        SearchGive(s)
                    }
                })
            });

            //末页
            $(".btn4").click(function (){
                $.ajax({
                    url: "userSearchGiveByPageServlet",
                    type : "post",
                    data : "currentPage="+totalPage+"&bookname="+search1+"&auther="+search2,
                    success : function (s){
                        SearchGive(s)
                    }
                })
            });
            //下一页
            $(".btn3").click(function (){
                $.ajax({
                    url: "userSearchGiveByPageServlet",
                    type : "post",
                    data : "currentPage="+(parseInt(currentPage)+1)+"&totalPage="+totalPage+"&bookname="+search1+"&auther="+search2,
                    success : function (s){
                        SearchGive(s)
                    }
                })
            });
            //搜素
            $(".btn").click(function (){
                search1 = $(".bookname").val();
                search2 = $(".auther").val();
                $.ajax({
                    url: "userSearchGiveByPageServlet",
                    type : "post",
                    data : "bookname="+search1+"&auther="+search2,
                    success : function (s){
                        SearchGive(s)
                    }
                })
            });
        }
    }
    //归还图书
    $(".option3").click(function (){
        $(".option1").attr("class","option1");
        $(".option2").attr("class","option2 ");
        $(".option3").attr("class","option3 click");
        $(".option4").attr("class","option4");
        $(".option5").attr("class","option5");
        $.ajax({
            url : "userGiveByPageServlet",
            type : "post",
            success : function (s){
                Give(s)
            }
        })
    });

    //退出系统
    $(".option5").click(function (){
        $(".option1").attr("class","option1");
        $(".option2").attr("class","option2 ");
        $(".option3").attr("class","option3");
        $(".option4").attr("class","option4");
        $(".option5").attr("class","option5 click");
        if (confirm("是否要退出本系统?") == true){
            location.href = "Login.html"
        }
    });
</script>
</html>